<template>
  <view class="medicine_edit_root">
    <view class="common_form">

      <u-form
        ref="refForm"
        class="common_form"
        border-bottom
        label-position="top"
        :model="info"
        :rules="rules"
      >
        <u-form-item
          :required="item.required"
          :prop="item.key"
          :label="item.name"
          labelWidth="200"
          v-for="(item, index) in msgList"
          :key="index"
        >
          <u-input
            border="none"
            v-if="item.type == 'input'"
            v-model="info[item.key]"
            type="text"
            placeholder="请输入"
            :maxlength="item.max"
            :showWordLimit="true"
            :height="48"
          ></u-input>

          <u--textarea
            border="none"
            v-if="item.type == 'textarea'"
            v-model="info[item.key]"
            :maxlength="item.max"
            :height="184"
            :showWordLimit="item.max != -1"
            placeholder="请输入"
            type="textarea"
            :count="item.max != -1"
            autoHeight
          >
          </u--textarea>
        </u-form-item>
      </u-form>
    </view>

    <view class="common_bottom_box">
      <view
        class="common_btn less_label"
        @click="toSave"
      >
        保存
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: { show: false },
      info: {
        id: undefined,
        name: "",
        brand: "",
        model: "",
        component: "",
        symptoms_treatment: "",
        usage_dosage: "",
        adverse_reactions: "",
        taboo: "",
        attention: "",
        interaction: "",
        storage: "",
        approval_number: "",
      },
      msgList: [
        { name: "名称", key: "name", type: "input", max: 50, required: true },
        { name: "品牌", key: "brand", type: "input", max: 50 },
        { name: "规格", key: "model", type: "input", max: 50 },
        { name: "批准文号", key: "approval_number", type: "textarea", max: 200, required: true },
        { name: "适应症", key: "symptoms_treatment", type: "textarea", max: -1, required: true },
        { name: "用法用量", key: "usage_dosage", type: "textarea", max: -1, required: true },
        { name: "成 份", key: "component", type: "textarea", max: -1 },
        { name: "不良反应", key: "adverse_reactions", type: "textarea", max: -1 },
        { name: "禁 忌", key: "taboo", type: "textarea", max: -1 },
        { name: "注意事项", key: "attention", type: "textarea", max: -1 },
        { name: "相互作用", key: "interaction", type: "textarea", max: -1 },
        { name: "贮 藏", key: "storage", type: "textarea", max: 200 },
      ],
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写药品名称',
          trigger: ['blur', 'change']
        },
        approval_number: {
          type: 'string',
          required: true,
          message: '请填写批准文号',
          trigger: ['blur', 'change']
        },
        symptoms_treatment: {
          type: 'string',
          required: true,
          message: '请填写适应症',
          trigger: ['blur', 'change']
        },
        usage_dosage: {
          type: 'string',
          required: true,
          message: '请填写用法用量',
          trigger: ['blur', 'change']
        },
      }
    };
  },
  methods: {
    toSave() {
      this.$refs.refForm.validate(isPass => {

      });
    },
  },
  mounted() { },
  created() {
    const info = this.getIntent();
    Object.assign(this.info, info);
  },
};
</script>

<style
  lang="scss"
  scoped
>
.medicine_edit_root {
  background: #fff;
  height: 100vh;

  .common_form {
    height: calc(100vh - 136rpx);
    padding: 24rpx 40rpx;
    box-sizing: border-box;
    overflow: auto;
  }
}
</style>